<template>
  <div>
    <div id="container" style="width: 100%; height: calc(100vh - 100px)"></div>
  </div>
</template>

<script>
// 信息窗体的内容
var content1 = ["<div style='font-size: 14px'>这是存储仓库</div>"];
var content2 = ["<div style='font-size: 14px'>这是开发仓库</div>"];
var content3 = ["<div style='font-size: 14px'>这是交接点</div>"];

export default {
  name: "Map",
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    // 创建地图实例
    var map = new AMap.Map("container", {
      zoom: 18,
      center: [113.068461, 28.276996],
      resizeEnable: true,
      // mapStyle: 'amap://styles/whitesmoke'
    })

    // 坐标拾取器
    var clickHandler = function (e) {
      console.log('您在[ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ]的位置点击了地图！');

      infoWindow1.open(map, [113.068461, 28.276996]);
      infoWindow2.open(map, [113.069882, 28.2772456]);
      infoWindow3.open(map, [113.070396, 28.277939]);

    };

    // 点击获取坐标
    map.on('click', clickHandler);

    // 点标记1
    var marker1 = new AMap.Marker({
      position: new AMap.LngLat(113.068461, 28.276996),  // 经纬度对象，也可以
      title: '存储基地--崇美仓库',
      // icon:
    });
    // 创建 infoWindow 实例
    var infoWindow1 = new AMap.InfoWindow({
      anchor: 'top-right',
      content: content1.join("<br>")  //传入 dom 对象，或者 html 字符串
    });
    map.add(marker1);
    marker1.on('click', clickHandler);

    // 点标记2
    var marker2 = new AMap.Marker({
      position: new AMap.LngLat(113.069882, 28.2772456),  // 经纬度对象，也可以
      title: '开发基地--丹桂仓库',
    });
    map.add(marker2);
    marker2.on('click', clickHandler);

    var infoWindow2 = new AMap.InfoWindow({
      anchor: 'top-left',
      content: content2.join("<br>")  //传入 dom 对象，或者 html 字符串
    });

    // 点标记3
    var marker3 = new AMap.Marker({
      position: new AMap.LngLat(113.070396, 28.277939),  // 经纬度对象，也可以
      title: '运输点--仓库大门',
    });
    map.add(marker3);
    marker3.on('click', clickHandler);

    var infoWindow3 = new AMap.InfoWindow({
      anchor: 'top-left',
      content: content3.join("<br>")
    });

  },
  methods: {}
}
</script>

<style scoped>

</style>